<template>
  <div class="page sign-record-page">
    <div class="content">
      <!-- 显示签到记录 -->
      <div v-if="records.length > 0" class="record-list">
        <div v-for="(item, index) in records" :key="index" class="record-card">
          <div class="record-header">
            <div class="date">{{ item.date }}</div>
            <div class="money">{{ item.money }}元</div>
          </div>
          <div class="record-body">
            <div class="balance-change">
              <span class="before">{{ item.before }}元</span>
			  <text class="arrow" >→</text>
              <span class="after">{{ item.after }}元</span>
            </div>
          </div>
          <div class="record-footer">
            <div class="memo">{{ item.memo }}</div>
          </div>
        </div>
      </div>

      <!-- 如果没有签到记录 -->
      <div v-else class="empty-state">
        <uni-icons type="info" size="64" color="#CCCCCC" />
        <div class="empty-text">暂无签到记录</div>
      </div>
    </div>
  </div>
</template>

<script>
import Config from "@/common/config.js"; // 本地配置数据
export default {
  data() {
    return {
      records: []  // 用来保存签到记录的数组
    };
  },
  methods: {
    // 获取签到记录
    getSignInLogs() {
      const userinfo = uni.getStorageSync('userinfo');  // 获取存储在本地的用户信息
      const userId = userinfo.user_id;  // 获取 user_id

      this.$u.post(`https://${Config.baseUrl}/api/Redpacket/getMoneyLogs`, {
        user_id: userId  // 传递 user_id 到后端接口
      }).then(res => {
        if (res.status === 'success') {
          this.records = res.data;  // 将返回的签到记录存入 records
        } else {
          this.$refs.uToast?.show({
            title: '加载失败',
            type: 'error'
          });
        }
      }).catch(err => {
        console.error("请求失败", err);
        this.$refs.uToast?.show({
          title: '网络异常',
          type: 'error'
        });
      });
    }
  },
  onLoad() {
    // 页面加载时调用获取签到记录的函数
    this.getSignInLogs();
  }
};
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #FF8C3D 0%, #FFFFFF 100%);
  padding: 30rpx;
  box-sizing: border-box;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;

  .title {
    color: #FFFFFF;
    font-size: 36rpx;
    font-weight: 500;
  }
}

// .content {
//   background: #FFFFFF;
//   border-radius: 20rpx;
//   padding: 30rpx;
//   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
// }

.record-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.record-card {
  border: 1rpx solid #EEEEEE;
  border-radius: 16rpx;
  padding: 24rpx;
  background: #FAFAFA;
}

.record-header {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333333;

  .money {
    color: #FF6B00;
    font-weight: 500;
  }
}

.record-body {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .before, .after {
    font-size: 26rpx;
    color: #666;
  }

  .arrow {
    margin: 0 20rpx;
  }
}

.record-footer {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #999999;
  text-align: left;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;

  .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999999;
  }
}
</style>
